<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
?>

<?php if($this->hidden||$this->titleshow): ?>
    <section class="password-protection">
        <img src="<?php echo $this->options->protectedBgImage() ?: 'https://picsum.photos/1920/1080'; ?>">
        <div class="protection-content">
            <h3>访问受保护的内容</h3>
            <p>这篇文章需要密码才能查看，请输入密码</p>
            <form class="protection-input" action="<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl($this->permalink); ?>" method="post">
                <input  type="password" class="text" name="protectPassword" class="form-control" placeholder="请输入密码" aria-label="请输入密码">
                <input type="hidden" name="protectCID" value="<?php $this->cid(); ?>" />
                <button type="submit" class="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                        <path d="M18 1.5c2.9 0 5.25 2.35 5.25 5.25v3.75a.75.75 0 0 1-1.5 0V6.75a3.75 3.75 0 1 0-7.5 0v3a3 3 0 0 1 3 3v6.75a3 3 0 0 1-3 3H3.75a3 3 0 0 1-3-3v-6.75a3 3 0 0 1 3-3h9v-3c0-2.9 2.35-5.25 5.25-5.25Z" />
                    </svg>
                </button>
            </form>
            <?php if(isset($_POST['password'])): ?>
                <p class="error-message">密码错误，请重试</p>
            <?php endif; ?>
        </div>
    </section>
<?php else: ?>
    <?php if($this->fields->article_type == "photos") { ?><!-- 磨砂样式 -->
    <?php $this->need('parts/photos.php');?>
    <?php } elseif ($this->fields->article_type == "books") { ?><!-- 书单样式 -->
    <?php $this->need('parts/books.php');?>
    <?php } elseif ($this->fields->article_type == "music") { ?><!-- 透明样式 -->
    <?php $this->need('parts/music.php');?>
    <?php } elseif ($this->fields->article_type == "say") { ?><!-- 长图样式 -->
    <?php $this->need('parts/say.php');?>
    <?php } else {?><!-- 默认样式 -->
    <header class="article-header-bg">
    	<figure>
                <!-- 输出第一张缩略图 -->
                <img data-src="<?php echo _getThumbnails($this)[0] ?>" alt="<?= $this->title ?> 封面图" class="cover-image">
                <!-- 占位图 -->
                <div class="dynamic-background"></div>
    		    <i class="loading">封面图加载中</i>
    	</figure>
    	<hgroup class="article-header-content">
    		<h1 class="article-title">
    			<?php $this->title() ?>
    		</h1>
    		<div class="meta-bar">
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" />
    				</svg>
    				<?php $this->author(); ?>
    			</span>
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z" />
    				</svg>
    				<?php $this->date(); ?>
    			</span>
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M16 13c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm6-6c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm2-7C6.48 0 2 4.48 2 10s4.48 10 10 10 10-4.48 10-10S17.52 0 12 0z" />
    				</svg>
    				<?php get_post_view($this) ?> 热度
    			</span>
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />
    				</svg>
    				<?php $this->commentsNum('0 评论', '1 评论', '%d 评论'); ?>
    			</span>
    		</div>
    		<div class="waves-box">
    			<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
    				<defs>
    					<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
    				</defs>
    				<g class="parallax">
    					<use xlink:href="#gentle-wave" x="48" y="0"></use>
    					<use xlink:href="#gentle-wave" x="48" y="3"></use>
    					<use xlink:href="#gentle-wave" x="48" y="5"></use>
    					<use xlink:href="#gentle-wave" x="48" y="7"></use>
    				</g>
    			</svg>
    		</div>
    	</hgroup>
    </header>
    
    <main class="container">
        <section class="article-wrapper">
        	<article class="main-content">
                <div class="text-layout">
                    <?php _article_changetext($this); ?>
                </div>
        	</article>
        </section>
        <section class="comments-wrapper">
            <?php $this->need('comments.php');?>
        </section>
    </main>
    
    <?php }?>
    <?php $this->need('layout/footer.php');?>
<?php endif; ?>
<?php $this->need('footer.php');?>